<template>
	<view class="center">
		<view class="logo" :hover-class="!login ? 'logo-hover' : ''" style="position: relative;">
			<view style="position: absolute;right: 40upx;top: 150upx;">
				<text class="cuIcon-settingsfill" style="font-size: 50upx;"></text>
			</view>
			<block v-if="login">
				<image class="logo-img" :src="userinfo.userUrl"></image>
			</block>
			<block v-else>
				<view class="logo-img" style="overflow: hidden;">
					<open-data type="userAvatarUrl" class="logo-img"></open-data>
				</view>
			</block>
			<view class="logo-title flex">
				<text class="uer-name">Hi，{{login ? userinfo.userName : '您未登录'}}</text>
			</view>
			<block v-if="!login">
				<button class="login-btn" open-type="getUserInfo" @getuserinfo.stop="getUserInfo">授权登录</button>
			</block>
		</view>
		<block v-if="login">
			<userMovie :userMovieList="userMovieList"></userMovie>
		</block>
	</view>
</template>

<script>
	let that;
	import userMovie from '../../components/userMovie/userMovie.vue';
	import {
		mapActions,
		mapGetters
	} from "vuex";
	export default {
		components: {
			userMovie
		},
		data() {
			return {
				login: false,
				avatarUrl: "../../static/uni-center/logo.png",
				Token: '',
				userinfo: {},
				userMovieList: []
			}
		},
		methods: {
			goLogin() {
				if (!this.login) {

				}
			},
			wxLoginStep(code) {
				this.$api.login({
					code
				}, (res) => {
					if (res.code) {
						that.Token = res.data.Token;
					} else {
						this.$common.errorToShow("获取openID异常", function() {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			},
			getUserInfo(res) {
				if (res.detail.errMsg == 'getUserInfo:fail auth deny') {
					that.$common.errorToShow('授权失败')
				} else {
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							infoRes.userInfo.Token = that.Token;
							that.toWxLogin(infoRes.userInfo)
						},
						fail(res) {

						}
					});
				}
			},
			toWxLogin(data) {
				let _this = this
				_this.$api.upinfoLogin(data, function(res) {
					if (res.code) {
						_this.login = true;
						_this.userinfo = res.data[0];
						_this.$common.successToShow("登录成功")
						_this.$store.dispatch('setUserInfoAction', res.data[0])
						_this.$store.dispatch('saveUserTokenAction', _this.Token)
						_this.initData()
					} else {
						_this.$common.errorToShow('登录失败，请重试')
					}
				})
			},
			initUserInfo() {
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						that.$api.userInfoInit(infoRes.userInfo, res => {
							if (res.code) {
								that.userinfo = res.data[0];
								that.initData()
								that.isLoginShow = true;
								that.$common.successToShow("更新信息成功")
								that.$store.dispatch('setUserInfoAction', that.userInfo)
							} else {
								that.$common.errorToShow('更新信息失败，请重试')
							}
						})
					},
					fail(res) {

					}
				});
			},
			initData() {
				this.getSeenMovie()
				this.getWantMovie()
			},
			getSeenMovie() {
				this.$api.getSeenMovie({}, (res) => {
					if (res.code) {
						this.$set(this.userMovieList, 0, res.data)
					}
				})
			},
			getWantMovie() {
				this.$api.getWantMovie({}, (res) => {
					if (res.code) {
						this.$set(this.userMovieList, 1, res.data)
						// console.log(res.data)
					}
				})
			}
		},
		onLoad() {
			that = this;
			if (that.login) {
				// that.login = true
				// that.userinfo = that.$store.getters.getUserInfos
				that.initUserInfo()
			} else {
				uni.login({
					success(res) {
						if (res.code) {
							that.wxLoginStep(res.code)
						} else {
							that.$common.errorToShow('未取得code')
						}
					},
					fail() {
						that.$common.errorToShow('获取code失败')
					}
				})
			}
		},
		onShow() {
			this.login && this.initUserInfo()
		}
	}
</script>

<style scoped>
	.center {
		display: flex;
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 450upx;
		padding: 20upx;
		padding-top: 200upx;
		box-sizing: border-box;
		background-color: #42BD56;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-btn {
		color: #fff;
		width: 180upx;
		height: 50upx;
		line-height: 50upx;
		border-radius: 25upx;
		/* background: #ff7159; */
		background-color: transparent;
		border: 2upx solid #fff;
		font-size: 12px;
	}
</style>
